<template>
	<view class="section section-detail">
		<view class="product_info_recommend">
			<view class="guess-like">
				<view class="recommend-box">
					<view class="recommend-title">
						商品推荐
					</view>
					<view class="recommend-list el-flex">
						<block v-for="(item,index) in related_recommend" :key="index">
							<view class="goods-item" @click="toShopDetail(item.action)">
								<view class="exposure">
									<view class="goods-img-box">
										<u-image :src="item.image_url" :lazy-load="true" mode='widthFix'></u-image>
									</view>
									<view class="goods-info">
										<view class="goods-name">
											{{item.name}}
										</view>
										<view class="goods-price price">
											￥{{item.price}}
											<text class="price" v-if="item.price!==item.market_price">
												￥{{item.market_price}}
											</text>
										</view>
									</view>
								</view>
							</view>
						</block>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LazyLoad from '../LazyLoad/LazyLoad.vue'
	export default {
		name: "product_info_recommend",
		components:{LazyLoad},
		props: ['product_id'],
		data() {
			return {
				related_recommend: []
			};
		},
		methods: {
			toShopDetail(action) {
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`
					})
				}
			},
			getRecomBtmData() {
				this.$request.get('/getRecomBtmData', {
					'product_id': this.product_id,
				}).then((res) => {
					this.related_recommend = res.data.data.related_recommend.data
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		mounted() {
			this.getRecomBtmData()
		}
	}
</script>

<style lang="scss" scoped>
	.section-detail {
		view {
			line-height: 1.15;
		}

		.product_info_recommend {
			.guess-like {
				.recommend-box {
					background: #fff;
					text-align: left;

					.recommend-title {
						line-height: .8rem;
						padding: 0 0.32rem;
						font-size: .3rem;
					}

					.recommend-list {
						overflow: hidden;
						flex-wrap: wrap;
						justify-content: space-between;

						.goods-item {
							flex: 0 1 49.5%;
							overflow: hidden;

							.exposure {
								display: block;

								.goods-img-box {
									display: block;
									width: 100%;

									/deep/.u-image {
										width: 100% !important;
										height: auto !important;

									}

									/deep/.u-image__image {
										width: 100% !important;
									}
								}

								.goods-info {
									padding: 0.18rem 0.26rem 0.22rem;

									.goods-name {
										font-size: .28rem;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
									}

									.goods-price {
										font-size: .32rem;
										display: inline-block;
										color: #ff6700;
										margin-top: 0.1rem;

										.price {
											font-size: .22rem;
											margin-left: 0.1rem;
											color: rgba(0, 0, 0, .54);
											text-decoration: line-through;
										}
									}

									.price {
										position: relative;
										line-height: 1em;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>